<template>
    <div id="map" class="map"></div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import OSM from "ol/source/OSM";
// import XYZ from "ol/source/XYZ.js";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";

export default {
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            new Map({
                layers: [
                    new TileLayer({
                        source: new OSM()
                    }),
                    // new TileLayer({
                    //     source: new XYZ({
                    //         url: 'http://img3.xs.cdnyes.com/mt1/?lyrs=s%40817&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}'
                    //     })
                    // })
                ],
                target: "map",
                view: new View({
                    center: [0, 0],
                    zoom: 2
                })
            });

            console.log("init finished");
        }
    }
};
</script>
<style>
.map {
    width: 100%;
    height: 100%;
}
</style>
